<template>
  <div>
    <ContainerFS />
    <!-- <ExampleDW /> -->
    <!-- <ContainerWrapperIf /> -->
    <!-- <ContainerTheSlotAlter /> -->
    <!-- <ContainerV3CTS /> -->
    <!-- <ContainerTPTC /> -->
    <!-- <DocumentContainer /> -->
    <!-- <ParentComponent /> -->
    <!-- <ContainerNF /> -->
    <!-- <ContainerTheSlot /> -->
    <!-- <SthNextTick /> -->
    <!-- <ContainerModal /> -->
    <!-- <ExampleCom /> -->
    <!-- <ContainerComp /> -->
    <!-- <NonsenseABM /> -->
    <!-- <ContainerTheTable /> -->
    <!-- <MutationObserve /> -->
    <!-- <ContainerCF /> -->
    <!-- <ContainerCTS /> -->
    <!-- <ContainerCarousel /> -->
    <!-- <ContainerChild /> -->
    <!-- <VAContainer /> -->
    <!-- <ContainerRS /> -->
    <!-- <ContainerCustomComponent /> -->
    <!-- <EmitParent /> -->
    <!-- <Layout /> -->
    <!-- <ContainerGrid /> -->
    <!-- <ContainerFC /> -->
    <!-- <ContainerCard /> -->
    <!-- <ContainerWCP /> -->
    <!-- <ContainerMC /> -->
    <!-- <ContainerContactList /> -->
    <!-- <ParentComputed /> -->
    <!-- <Usage /> -->
    <!-- <CoatOfContainer /> -->
    <!-- <TheParent /> -->
    <!-- <AnotherParent /> -->
    <!-- <Key /> -->
    <!-- <Difference :label="foo" /> -->
    <!-- <DiningRoom /> -->
    <!-- <Modal /> -->
    <!-- <Nonsense /> -->
    <!-- <Parent /> -->
    <!-- <AnotherView /> -->
    <!-- <the-view></the-view> -->
    <!-- <Html2Canvas />
    <MultiOrder />
    <VuexHandleJSON />
    <DynamicSlide />
    <NestingSlide />
    <ListSlide />
    <JSSlide />
    <BasicSlide />
    <Component2Pdf />
    <Long2Pdf />
    <Complex2Pdf />
    <Dynamic2Pdf :headers="headers" :items="items" />
    <Cross />
    <Encrypted :items="theUncryptData" />
    <input type="file" @change="onFileChange">
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
    <div v-for="(sheet, sheetIndex) in sheets" :key="sheetIndex">
      <h3>{{ sheet.name }}</h3>
      <table>
        <thead>
          <tr>
            <th v-for="(header, index) in sheet.headers" :key="index">{{ header }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, rowIndex) in sheet.data" :key="rowIndex">
            <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
          </tr>
        </tbody>
      </table>
    </div> -->
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
// import Cross from './views/cors/Cors.vue';
// import Dynamic2Pdf from './views/pdf/Dynamic2Pdf.vue';
// import Encrypted from './views/crypted/Encrypted.vue';
// import Complex2Pdf from './views/pdf/Complex2Pdf.vue';
// import Long2Pdf from './views/pdf/Long2Pdf.vue';
// import Component2Pdf from './views/pdf/Component2Pdf.vue';
// import BasicSlide from './views/slide/BasicSlide.vue';
// import JSSlide from './views/slide/JSSlide.vue';
// import ListSlide from './views/slide/ListSlide.vue';
// import NestingSlide from './views/slide/NestingSlide.vue';
// import DynamicSlide from './views/slide/DynamicSlide.vue';
// import VuexHandleJSON from './views/handleJSON/VuexHandleJSON.vue';
// import MultiOrder from './views/table/MultiOrder.vue';
// import Html2Canvas from './views/pdf/Html2Canvas.vue';
// import TheView from './views/nested/TheView.vue';
// import AnotherView from './views/nested1/AnotherView.vue';
// import Parent from './views/model/Parent.vue';
// import Nonsense from './views/model/Nonsense.vue';
// import Modal from './views/scoped/Modal.vue';
// import DiningRoom from './views/elementInSlot/DiningRoom.vue';
// import Difference from './views/custom/CustomInput.vue';
// import Key from './views/elementInSlot/Key.vue';
// import AnotherParent from './views/funFromP/Parent.vue';
// import TheParent from './views/slotInSlot/TheParent.vue';
// import CoatOfContainer from './views/childInDefaultSlot/CoatOfContainer.vue';
// import Usage from './views/exposeToP/Usage.vue';
// import ParentComputed from './views/slotPropInP/ParentComputed.vue'
// import ContainerContactList from './views/passToG/ContainerContactList.vue';
// import ContainerMC from './views/dataThroughSlot/ContainerMC.vue';
// import ContainerWCP from './views/watchCompProp/ContainerWCP.vue';
// import ContainerCard from './views/displaySlot/ContainerCard.vue';
// import ContainerFC from './views/slotsVariables/ContainerFC.vue';
// import ContainerGrid from './views/slotInheritance/ContainerGrid.vue';
// import Layout from './views/passSlot/Layout.vue';
// import EmitParent from './views/emit/Parent.vue'
// import ContainerCustomComponent from './views/emit/ContainerCustomComponent.vue';
// import ContainerRS from './views/reactiveSlot/ContainerRS.vue';
// import VAContainer from './views/passPropTS/VAContainer.vue';
// import ContainerChild from './views/rederSlotsWithDynamicName/ContainerChild.vue';
// import ContainerCarousel from './views/carouselSlot/ContainerCarousel.vue';
// import ContainerCTS from './views/checkSlot/ContainerCTS.vue';
// import ContainerCF from './views/defaultSlot/ContainerCF.vue';
// import MutationObserve from './views/observe/MutationObserve.vue';
// import ContainerTheTable from './views/extend/ContainerTheTable.vue';
// import NonsenseABM from './views/activatorByMulti/NonsenseABM.vue';
// import ContainerComp from './views/renderStaticListWithSlot/ContainerComp.vue';
// import ExampleCom from './views/modalDynamicContent/ExampleCom.vue';
// import ContainerModal from './views/betterClose/ContainerModal.vue';
// import SthNextTick from './views/nextTick/SthNextTick.vue';
// import ContainerTheSlot from './views/noContentNoSlot/ContainerTheSlot.vue';
// import ContainerNF from './views/dataFromSlotToSlot/ContainerNF.vue';
// import ParentComponent from './views/passComponentAsProps/ParentComponent.vue';
// import DocumentContainer from './views/parentPropsToSlot/DocumentContainer.vue';
// import ContainerTPTC from './views/propsUsingSlotsFromParentToChild/ContainerTPTC.vue';
// import ContainerV3CTS from './views/v3CheckSlot/ContainerV3CTS.vue';
// import ContainerTheSlotAlter from './views/noContentNoSlot/ContainerTheSlotAlter.vue';
// import ContainerWrapperIf from './views/dynamicWrapper/ContainerWrapperIf.vue';
// import ExampleDW from './views/dynamicWrapper/ExampleDW.vue';
import ContainerFS from './views/biSlot/ContainerFS.vue';

export default {
  components: {
    // Encrypted,
    // Cross,
    // Dynamic2Pdf,
    // Complex2Pdf,
    // Long2Pdf,
    // Component2Pdf,
    // BasicSlide,
    // JSSlide,
    // ListSlide,
    // NestingSlide,
    // DynamicSlide,
    // VuexHandleJSON,
    // MultiOrder,
    // Html2Canvas,
    // TheView,
    // AnotherView,
    // Parent,
    // Nonsense,
    // Modal,
    // DiningRoom,
    // Difference,
    // Key,
    // AnotherParent,
    // TheParent,
    // CoatOfContainer,
    // Usage,
    // ParentComputed,
    // ContainerContactList,
    // ContainerMC,
    // ContainerWCP,
    // ContainerCard,
    // ContainerFC,
    // ContainerGrid,
    // Layout,
    // EmitParent,
    // ContainerCustomComponent,
    // ContainerRS,
    // VAContainer,
    // ContainerChild,
    // ContainerCarousel,
    // ContainerCTS,
    // ContainerCF,
    // MutationObserve,
    // ContainerTheTable,
    // NonsenseABM,
    // ContainerComp,
    // ExampleCom,
    // ContainerModal,
    // SthNextTick,
    // ContainerTheSlot,
    // ContainerNF,
    // ParentComponent,
    // DocumentContainer,
    // ContainerTPTC,
    // ContainerV3CTS,
    // ContainerTheSlotAlter,
    // ContainerWrapperIf,
    // ExampleDW,
    ContainerFS
  },
  //   data() {
  //     return {
  //       sheets: [],
  //       errorMessage: '',
  //       theUncryptData: [{ id: 1, value: 1 }, { id: 2, value: 2 }],
  //       headers: ['name', 'age'],
  //       items: [{ name: 'one', age: 11 }, { name: 'two', age: 22 }, { name: 'three', age: 33 }, { name: 'four', age: '44' }],
  //       foo: 'foo'
  //     }
  //   },
  //   methods: {
  //     onFileChange(event) {
  //       const file = event.target.files[0];
  //       if (file) {
  //         const reader = new FileReader();
  //         reader.onload = (e) => {
  //           try {
  //             const data = new Uint8Array(e.target.result);
  //             const workbook = XLSX.read(data, { type: 'array' });

  //             const parsedSheets = workbook.SheetNames.map(sheetName => {
  //               const worksheet = workbook.Sheets[sheetName];
  //               const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

  //               return {
  //                 name: sheetName,
  //                 headers: json[0],
  //                 data: json.slice(1)
  //               };
  //             });

  //             this.sheets = parsedSheets;
  //             this.errorMessage = '';
  //           } catch (error) {
  //             this.errorMessage = '无法解析文件，请确保上传的是Excel文件。';
  //             this.sheets = [];
  //           }
  //         };
  //         reader.readAsArrayBuffer(file);
  //       } else {
  //         this.errorMessage = '请选择一个文件';
  //       }
  //     }
  //   }
}//https://blog.csdn.net/black_cat7/article/details/142835406?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522e3231c8a6673e7b2cd9c9551eef1e586%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=e3231c8a6673e7b2cd9c9551eef1e586&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-142835406-null-null.142^v101^pc_search_result_base8&utm_term=vue%E4%B8%8A%E4%BC%A0excel&spm=1018.2226.3001.4187
</script>
<style lang="">

</style>